---
title: Storybook for React with Webpack
hideRendererSelector: true
sidebar:
  order: 6
  title: React (Webpack)
---

Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/).

<Callout variant="info">

**We recommend using [`@storybook/react-vite`](./react-vite.mdx)** for most React projects. The Vite-based framework is faster, more modern, and offers better support for testing features.

Use this Webpack-based framework (`@storybook/react-webpack5`) only if you need specific Webpack features not available in Vite.
</Callout>

## Install

To install Storybook in an existing React project, run this command in your project's root directory:

<CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />

You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).

### Requirements

<GetStartedVersions versions={[{
  name: 'React',
  range: '≥ 16.8',
  icon: '/images/logos/renderers/logo-react.svg'
}, {
  name: 'Webpack',
  range: '5',
  icon: '/images/logos/builders/webpack.svg'
}]} />


## Run Storybook

To run Storybook for a particular project, run the following:

<CodeSnippets path="storybook-run-dev.md" />

To build Storybook, run:

<CodeSnippets path="build-storybook-production-mode.md" />

You will find the output in the configured `outputDir` (default is `storybook-static`).


## Configure

### Create React App (CRA)

Support for [Create React App](https://create-react-app.dev/) is handled by [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app).

This preset enables support for all CRA features, including Sass/SCSS and TypeScript.

### Manually initialized apps

If you're working on an app that was initialized manually (i.e., without the use of CRA), ensure that your app has [react-dom](https://www.npmjs.com/package/react-dom) included as a dependency. Failing to do so can lead to unforeseen issues with Storybook and your project.


## FAQ

### How do I manually install the React Webpack framework?

First, install the framework:

{/* prettier-ignore-start */}

<CodeSnippets path="react-webpack5-install.md" />

{/* prettier-ignore-end */}

Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel:

<Callout variant="info">
  If your project is using [Create React App](#create-react-app-cra), you can skip this step.
</Callout>

{/* prettier-ignore-start */}

<CodeSnippets path="storybook-addon-compiler-swc-auto-install.md" />

{/* prettier-ignore-end */}

or

{/* prettier-ignore-start */}

<CodeSnippets path="storybook-addon-compiler-babel-auto-install.md" />

{/* prettier-ignore-end */}

More details can be found in the [Webpack builder docs](../../builders/webpack.mdx#compiler-support).

Finally, update your `.storybook/main.js|ts` to change the framework property:

{/* prettier-ignore-start */}

<CodeSnippets path="react-webpack5-add-framework.md" />

{/* prettier-ignore-end */}

### How do I migrate to the React Vite framework?

Please refer to the [migration instructions for `@storybook/react-vite`](./react-vite.mdx#how-do-i-migrate-from-the-react-webpack-framework).

## API

### Options

You can pass an options object for additional configuration if needed:

{/* prettier-ignore-start */}

<CodeSnippets path="react-webpack5-framework-options.md" />

{/* prettier-ignore-end */}

#### `builder`

Type: `Record<string, any>`

Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
